<div
  #PrimeContainer
  class="devui-category-search-container devui-category-search-id-{{ id }}"
  [ngClass]="{ 'container-hover': isHover && !isFocus, 'devui-gray-style': styleType === 'gray' }"
  (mouseenter)="isHover = true"
  (mouseleave)="isHover = false"
>
  <div class="devui-category-search-icon" (click)="search()">
    <svg width="16px" height="16px" viewBox="0 0 16 16" class="svg-icon-search">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57190212 13.4818819,10.0227913 12.6071076,11.1912056 L15.7071068,14.2928932 C16.0976311,14.6834175 16.0976311,15.3165825 15.7071068,15.7071068 C15.3466228,16.0675907 14.7793918,16.0953203 14.3871006,15.7902954 L14.2928932,15.7071068 L11.1912056,12.6071076 C10.0227913,13.4818819 8.57190212,14 7,14 C3.13400675,14 5.5067062e-14,10.8659932 5.5067062e-14,7 C5.5067062e-14,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z"
          fill="#71757F"
        ></path>
      </g>
    </svg>
  </div>
  <div #ScrollBarContainer class="devui-category-search-line-container">
    <ul class="devui-category-search-line">
      <li
        class="devui-tag-item"
        *ngFor="let item of selectedTags"
        #selectedDropdown="d-dropdown"
        dDropDown
        appendToBody
        dDropDownToggle
        [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', 'leftUp']"
        [closeScope]="checkType(item)"
        (toggleEvent)="resetContent(selectedDropdown, item)"
      >
        <ng-template
          [ngTemplateOutlet]="joinLabelTypesTemplate"
          [ngTemplateOutletContext]="{ item: item, isJoinLabelType: joinLabelTypes.includes(item.type) }"
        ></ng-template>
        <div dDropDownMenu class="devui-dropdown-menu devui-dropdown-menu-fix" [ngClass]="{ 'max-height': item.type !== 'treeSelect' }">
          <ng-template
            [ngTemplateOutlet]="item.customTemplate || templates[item.type]"
            [ngTemplateOutletContext]="{ tagOption: item, dropdown: selectedDropdown, isSelected: true }"
          ></ng-template>
        </div>
      </li>
      <div class="devui-category-search-input">
        <div
          class="devui-input-container"
          #inputDropdown="d-dropdown"
          dDropDown
          appendToBody
          [trigger]="'manually'"
          [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', 'leftUp']"
          [closeScope]="checkType(currentSelectTag)"
          (toggleEvent)="resetContent(inputDropdown)"
        >
          <div style="width: 100%">
            <input
              class="devui-category-search-toggle"
              autocomplete="off"
              #InputEle
              dDropDownToggle
              [readOnly]="inputReadOnly"
              [placeholder]="placeholderText || i18nCategorySearchText?.searchPlaceholder || ''"
              [ngModel]="searchKey"
              (ngModelChange)="searchKeyChangeEvent($event)"
              (click)="openMenu(inputDropdown, $event)"
              (keyup)="checkInputSearching(); openMenu(inputDropdown, $event)"
              (keydown.backspace)="backspaceEvent(inputDropdown)"
              (keydown.enter)="searchInputValue($event); closeMenu(inputDropdown)"
              (focus)="isHover = false; isFocus = true"
              (blur)="isFocus = false; blurInput($event)"
            />
          </div>
          <div
            *ngIf="!enterSearch || (enterSearch && showSearchCategory)"
            dDropDownMenu
            class="devui-dropdown-menu devui-dropdown-menu-fix devui-scrollbar devui-category-dropdown-menu-{{ id }}"
            [ngClass]="{ 'max-height': currentSelectTag?.type !== 'treeSelect' }"
          >
            <ul *ngIf="!currentSelectTag" class="devui-dropdown-menu-template">
              <ng-container *ngIf="!enterSearch && !currentSelectTag">
                <ng-container *ngFor="let item of categoryDisplay">
                  <li *ngIf="item.groupLength" class="devui-dropdown-item devui-category-search-group">
                    <ng-template
                      [ngTemplateOutlet]="customGroupNameTemplate || defaultGroupNameTemplate"
                      [ngTemplateOutletContext]="{ tag: item }"
                    ></ng-template>
                  </li>
                  <li
                    *ngIf="item.groupLength === undefined && !item.isSelected"
                    class="devui-dropdown-item"
                    (click)="chooseCategory(item, inputDropdown); closeMenu(inputDropdown)"
                  >
                    <span title="{{ item?.label }}">{{ item?.label }}</span>
                  </li>
                </ng-container>
                <div class="devui-no-data-text" *ngIf="showNoDataTips">
                  {{ textConfig.noCategoriesAvailable || i18nCategorySearchText?.noFilterConditions }}
                </div>
              </ng-container>
              <ng-container *ngIf="enterSearch">
                <li
                  *ngIf="showSearchConfig.keyword"
                  class="devui-dropdown-item devui-search-description"
                  (click)="searchInputValue($event); closeMenu(inputDropdown)"
                >
                  <span class="icon-search"></span>{{ showSearchConfig.keywordDescription(searchKey) }}
                </li>
                <ng-container *ngIf="showSearchConfig.field">
                  <li *ngFor="let item of searchField" (click)="searchCategory(item); closeMenu(inputDropdown)" class="devui-dropdown-item">
                    <span class="icon-search"></span>{{ showSearchConfig.fieldDescription(item?.label) }}
                  </li>
                </ng-container>
                <div
                  *ngIf="(showSearchConfig.keyword || showSearchConfig.field) && showSearchConfig.category && currentSearchCategory?.length"
                  class="devui-dividing-line"
                ></div>
                <ng-container *ngIf="showSearchConfig.category && currentSearchCategory?.length">
                  <div class="devui-dropdown-menu-tip" [style.paddingBottom]="currentSearchCategory.length ? '0' : '12px'">
                    {{ showSearchConfig.categoryDescription }}
                  </div>
                  <ul class="devui-category-search-keyword-in-category devui-dropdown-menu-template">
                    <li
                      *ngFor="let item of currentSearchCategory"
                      (click)="showCurrentSearchCategory(item, inputDropdown)"
                      class="devui-dropdown-item"
                    >
                      <span>{{ item?.label }}</span>
                    </li>
                  </ul>
                </ng-container>
              </ng-container>
            </ul>
            <ng-container *ngIf="!enterSearch && currentSelectTag">
              <ng-template
                [ngTemplateOutlet]="currentSelectTag.customTemplate || templates[currentSelectTag.type]"
                [ngTemplateOutletContext]="{ tagOption: currentSelectTag, dropdown: inputDropdown }"
              ></ng-template>
            </ng-container>
          </div>
        </div>
      </div>
    </ul>
  </div>
  <div class="devui-category-search-extended-container" *ngIf="showExtendedConfig">
    <ng-template *ngIf="operationConfig.clear.show" [ngTemplateOutlet]="operationConfig.clear.template || clearTpl"></ng-template>
    <ng-template *ngIf="operationConfig.save.show" [ngTemplateOutlet]="operationConfig.save.template || saveTpl"></ng-template>
    <ng-template *ngIf="operationConfig.more.show" [ngTemplateOutlet]="operationConfig.more.template || moreTpl"></ng-template>
    <ng-template *ngIf="operationConfig.customTemplate" [ngTemplateOutlet]="operationConfig.customTemplate"></ng-template>
  </div>
</div>

<ng-template #defaultGroupNameTemplate let-item="tag">
  <strong>{{ item?.groupName }}</strong>
</ng-template>

<ng-template #noData>
  <div class="devui-no-data-tip">{{ i18nCommonText?.noData }}</div>
</ng-template>

<ng-template #clearTpl>
  <div
    class="devui-category-search-icon"
    [class.disabled]="operationConfig.clear.disabled"
    (click)="!operationConfig.clear.disabled && clearFilter($event)"
  >
    <svg width="16px" height="16px" viewBox="0 0 16 16">
      <title>{{ i18nCategorySearchText?.clearFilterCondition }}</title>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M4.61289944,3.20970461 L4.70710678,3.29289322 L8,6.585 L11.2928932,3.29289322 C11.6834175,2.90236893 12.3165825,2.90236893 12.7071068,3.29289322 C13.0675907,3.65337718 13.0953203,4.22060824 12.7902954,4.61289944 L12.7071068,4.70710678 L9.415,8 L12.7071068,11.2928932 C13.0976311,11.6834175 13.0976311,12.3165825 12.7071068,12.7071068 C12.3466228,13.0675907 11.7793918,13.0953203 11.3871006,12.7902954 L11.2928932,12.7071068 L8,9.415 L4.70710678,12.7071068 C4.31658249,13.0976311 3.68341751,13.0976311 3.29289322,12.7071068 C2.93240926,12.3466228 2.90467972,11.7793918 3.20970461,11.3871006 L3.29289322,11.2928932 L6.585,8 L3.29289322,4.70710678 C2.90236893,4.31658249 2.90236893,3.68341751 3.29289322,3.29289322 C3.65337718,2.93240926 4.22060824,2.90467972 4.61289944,3.20970461 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </div>
</ng-template>

<ng-template #saveTpl>
  <div
    class="devui-category-search-icon"
    #saveDropdown="d-dropdown"
    dDropDown
    appendToBody
    [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', 'leftUp']"
    [class.disabled]="operationConfig.save.disabled"
    [closeScope]="'blank'"
    [disabled]="operationConfig.save.disabled"
    (toggleEvent)="createFilterInputAutoFocus(saveDropdown, createFilterInput, filterNameForm)"
  >
    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" dDropDownToggle>
      <title>{{ textConfig.createFilter }}</title>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M12,1 L15,4 L15,13 C15,14.1045695 14.1045695,15 13,15 L3,15 C1.8954305,15 1,14.1045695 1,13 L1,3 C1,1.8954305 1.8954305,1 3,1 L12,1 Z M11.171,3 L3,3 L3,13 L4,13 L4,10 C4,9.48716416 4.38604019,9.06449284 4.88337887,9.00672773 L5,9 L11,9 C11.5128358,9 11.9355072,9.38604019 11.9932723,9.88337887 L12,10 L12,13 L13,13 L13,4.829 L11.171,3 Z M9.999,10.999 L5.999,10.999 L6,13 L10,13 L9.999,10.999 Z M7,5 C7.55228475,5 8,5.44771525 8,6 C8,6.55228475 7.55228475,7 7,7 L5,7 C4.44771525,7 4,6.55228475 4,6 C4,5.44771525 4.44771525,5 5,5 L7,5 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
    <div dDropDownMenu class="devui-save-panel">
      <div class="devui-save-panel-title">
        <span>{{ textConfig.createFilter }}</span>
      </div>
      <div class="devui-save-filter-name">
        <span>{{ textConfig.filterTitle }}</span>
        <form #filterNameForm="ngForm">
          <input
            name="filter-name"
            class="devui-category-search-toggle"
            autocomplete="off"
            #createFilterInput
            dTextInput
            [(ngModel)]="filterName"
            [placeholder]="i18nCategorySearchText?.placeholder || ''"
            [dValidateRules]="filterNameRules"
          />
          <svg
            *ngIf="showFilterNameClear"
            (click)="$event.preventDefault(); $event.stopPropagation(); filterName = ''"
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
          >
            <title>{{ i18nCategorySearchText?.clearFilterCondition }}</title>
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                d="M4.61289944,3.20970461 L4.70710678,3.29289322 L8,6.585 L11.2928932,3.29289322 C11.6834175,2.90236893 12.3165825,2.90236893 12.7071068,3.29289322 C13.0675907,3.65337718 13.0953203,4.22060824 12.7902954,4.61289944 L12.7071068,4.70710678 L9.415,8 L12.7071068,11.2928932 C13.0976311,11.6834175 13.0976311,12.3165825 12.7071068,12.7071068 C12.3466228,13.0675907 11.7793918,13.0953203 11.3871006,12.7902954 L11.2928932,12.7071068 L8,9.415 L4.70710678,12.7071068 C4.31658249,13.0976311 3.68341751,13.0976311 3.29289322,12.7071068 C2.93240926,12.3466228 2.90467972,11.7793918 3.20970461,11.3871006 L3.29289322,11.2928932 L6.585,8 L3.29289322,4.70710678 C2.90236893,4.31658249 2.90236893,3.68341751 3.29289322,3.29289322 C3.65337718,2.93240926 4.22060824,2.90467972 4.61289944,3.20970461 Z"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </form>
      </div>
      <div class="devui-save-panel-operation-area">
        <d-button [disabled]="filterNameForm.invalid" (btnClick)="createFilterFn(); saveDropdown.toggle()">{{
          i18nCategorySearchText?.confirm
        }}</d-button>
        <d-button bsStyle="common" (btnClick)="saveDropdown.toggle()">{{ i18nCategorySearchText?.cancel }}</d-button>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #moreTpl>
  <div
    class="devui-category-search-icon"
    #seeMoreDropdown="d-dropdown"
    dDropDown
    appendToBody
    [alignOrigin]="primeContainer"
    [appendToBodyDirections]="['rightDown', 'rightUp', 'leftDown', 'leftUp']"
    [class.disabled]="operationConfig.more.disabled"
  >
    <svg width="16px" height="16px" viewBox="0 0 16 16" dDropDownToggle>
      <title>{{ i18nCategorySearchText?.seeMore }}</title>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M1,2 L3,2 L3,4 L1,4 L1,2 Z M1,7 L3,7 L3,9 L1,9 L1,7 Z M1,12 L3,12 L3,14 L1,14 L1,12 Z M5,2 L15,2 L15,4 L5,4 L5,2 Z M5,7 L15,7 L15,9 L5,9 L5,7 Z M5,12 L15,12 L15,14 L5,14 L5,12 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
    <div dDropDownMenu class="devui-selected-tags-list">
      <ul [ngStyle]="{ width: PrimeContainer?.clientWidth + 'px' }">
        <li class="devui-tag-item" *ngFor="let item of selectedTags; let i = index" (click)="scrollToTag(i, $event)">
          <ng-template
            [ngTemplateOutlet]="joinLabelTypesTemplate"
            [ngTemplateOutletContext]="{ item: item, isJoinLabelType: joinLabelTypes.includes(item.type) }"
          ></ng-template>
        </li>
      </ul>
    </div>
  </div>
</ng-template>

<ng-template #joinLabelTypesTemplate let-item="item" let-isJoinLabelType="isJoinLabelType">
  <div class="devui-tag-container">
    <d-tag
      [deletable]="true"
      [tag]="isJoinLabelType ? item : item.label + ': ' + (item.value[item.filterKey || 'label'] || '')"
      [titleContent]="item.title"
      [maxWidth]="tagMaxWidth + 'px'"
      [customViewTemplate]="item.tagCustomTemplate || (isJoinLabelType && defaultTagContentTemplate)"
      (tagDelete)="removeTag(item, $event.event)"
    ></d-tag>
  </div>
</ng-template>

<ng-template #defaultTagContentTemplate let-tag="tag" let-colorKey="tag.colorKey || 'color'">
  <span>{{ tag.label }}: </span>
  <span class="devui-category-search-multi-tag" [style.max-width]="tagMaxWidth + 'px'">
    <ng-container *ngFor="let val of tag.value.cache; let i = index">
      <span *ngIf="i > 0" class="devui-color-block-split-line">{{ textConfig.labelConnector || '|' }}</span>
      <span *ngIf="tag.type === 'label'" class="devui-color-block-sm" [style.background]="val[colorKey]"></span>
      <span [style.color]="val[colorKey]">{{ val[tag.filterKey || 'label'] || '' }}</span>
    </ng-container>
  </span>
</ng-template>

<ng-template [dType]="'radio'" let-tagOption="tagOption" let-key="tagOption.filterKey || 'label'">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <ul *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template devui-scrollbar">
    <li
      *ngFor="let item of tagOption.options"
      title="{{ item[key] }}"
      class="devui-dropdown-item"
      [class.active]="tagOption?.value[key] === item[key]"
      (click)="chooseItem(tagOption, item)"
    >
      <span>{{ item[key] }}</span>
    </li>
  </ul>
</ng-template>

<ng-template [dType]="'dateRange'" let-tagOption="tagOption" let-dropdown="dropdown">
  <d-datepicker-calendar
    #datepickerCalendarItem
    *ngIf="dropdown.isOpen"
    id="{{ tagOption.field }}"
    style="overflow-x: hidden"
    #dDatepickerPro
    [isRangeType]="true"
    [showTime]="tagOption.showTime"
    [activeRangeType]="tagOption.activeRangeType || 'start'"
    [(ngModel)]="tagOption.value.value"
  >
    <ng-template #footerTemplate>
      <div class="devui-datepicker-footer">
        <d-button
          style="margin-right: 8px"
          bsStyle="primary"
          (btnClick)="confirmDate(datepickerCalendarItem, tagOption, dropdown)"
          [disabled]="
            tagOption.showTime ? false : !tagOption.value.value || tagOption.value.value.length < 2 || tagOption.value.value.includes(null)
          "
        >
          {{ i18nCategorySearchText?.confirm }}
        </d-button>
        <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
      </div>
    </ng-template>
  </d-datepicker-calendar>
</ng-template>

<ng-template [dType]="'checkbox'" let-tagOption="tagOption" let-dropdown="dropdown">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template">
    <d-checkbox-group
      [(ngModel)]="tagOption.value.value"
      [options]="tagOption.options"
      [filterKey]="tagOption.filterKey || 'label'"
      [isShowTitle]="true"
    >
    </d-checkbox-group>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="chooseItems(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template [dType]="'label'" let-tagOption="tagOption" let-dropdown="dropdown">
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="tagOption.options?.length" class="devui-dropdown-menu-template">
    <d-checkbox-group
      [(ngModel)]="tagOption.value.value"
      [options]="tagOption.options"
      [filterKey]="'$label'"
      [labelTemplate]="labelContent"
      [isShowTitle]="true"
    >
      <ng-template #labelContent let-label="label">
        <span class="devui-color-block" [style.background]="splitLabel('color', label)" title="{{ splitLabel('label', label) }}"></span>
        <span title="{{ splitLabel('label', label) }}">{{ splitLabel('label', label) }}</span>
      </ng-template>
    </d-checkbox-group>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="chooseItems(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template [dType]="'textInput'" let-tagOption="tagOption" let-dropdown="dropdown">
  <form #textInputForm="ngForm">
    <input
      name="text-input"
      class="devui-category-search-type-text-input"
      autocomplete="off"
      dTextInput
      [(ngModel)]="tagOption.value.value"
      [maxlength]="tagOption.maxLength"
      [placeholder]="tagOption.placeholder || ''"
      [dValidateRules]="tagOption.validateRules"
    />
  </form>
  <div class="devui-dropdown-operation-area">
    <d-button [disabled]="textInputForm.invalid" (btnClick)="getTextInputValue(tagOption); closeMenu(dropdown)">{{
      i18nCategorySearchText?.confirm
    }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template [dType]="'numberRange'" let-tagOption="tagOption" let-dropdown="dropdown">
  <div class="devui-input-number-operation-area">
    <d-input-number
      size="sm"
      [min]="tagOption.min?.left"
      [max]="tagOption.max?.left"
      [maxLength]="tagOption.maxLength?.left"
      [step]="tagOption.step?.left || 1"
      [reg]="tagOption.reg?.left"
      [placeholder]="tagOption.placeholder?.left || ''"
      [(ngModel)]="tagOption.value.value[0]"
    >
    </d-input-number>
    <span> - </span>
    <d-input-number
      size="sm"
      [min]="tagOption.min?.right"
      [max]="tagOption.max?.right"
      [maxLength]="tagOption.maxLength?.right"
      [step]="tagOption.step?.right || 1"
      [reg]="tagOption.reg?.right"
      [placeholder]="tagOption.placeholder?.right || ''"
      [(ngModel)]="tagOption.value.value[1]"
    >
    </d-input-number>
  </div>
  <div class="devui-dropdown-operation-area">
    <d-button (btnClick)="getNumberRangeValue(tagOption); closeMenu(dropdown)">{{ i18nCategorySearchText?.confirm }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>

<ng-template [dType]="'treeSelect'" let-tagOption="tagOption" let-dropdown="dropdown" let-isSelected="isSelected">
  <div *ngIf="tagOption.multiple && tagOption.options?.length && tagOption.value.value?.length">
    <ul class="devui-select-list">
      <span>{{ i18nCategorySearchText?.selected }}</span>
      <li class="devui-select-item devui-no-label-item" *ngFor="let item of tagOption.value.value; last as isLast">
        {{ item[tagOption.filterKey || tagOption.treeNodeTitleKey || 'title'] }}
        <span *ngIf="!isLast">, </span>
      </li>
    </ul>
  </div>
  <div *ngIf="tagOption.searchable" class="devui-search-container">
    <d-search
      [placeholder]="tagOption.searchPlaceholder"
      [ngModel]="treeSearchKey"
      (ngModelChange)="treeSearch($event, tagOption.searchFn)"
    ></d-search>
  </div>
  <div class="devui-category-search-tree-container" [style.display]="tagOption.options?.length && !treeNoRecord ? 'block' : 'none'">
    <d-operable-tree
      #OperableTree
      *ngIf="dropdown.isOpen || treeResetFlag"
      class="devui-tree"
      [tree]="isSelected ? tagOption.value.options : tagOption.options"
      [treeNodeIdKey]="tagOption.treeNodeIdKey || 'id'"
      [treeNodeChildrenKey]="tagOption.treeNodeChildrenKey || 'children'"
      [treeNodeTitleKey]="tagOption.filterKey || tagOption.treeNodeTitleKey || 'title'"
      [checkboxDisabledKey]="tagOption.disabledKey || 'disabled'"
      [checkable]="tagOption.multiple"
      [canActivateNode]="!tagOption.multiple"
      [canActivateParentNode]="!tagOption.leafOnly"
      [iconParentOpen]="tagOption.iconParentOpen || icons.iconParentOpen"
      [iconParentClose]="tagOption.iconParentClose || icons.iconParentClose"
      [iconLeaf]="tagOption.iconLeaf || icons.iconLeaf"
      (nodeChecked)="onOperableNodeChecked($event, tagOption)"
      (nodeSelected)="onOperableNodeSelected($event, tagOption); closeMenu(dropdown)"
    >
    </d-operable-tree>
  </div>
  <div *ngIf="!tagOption.options?.length">
    <ng-container *ngTemplateOutlet="noData"></ng-container>
  </div>
  <div *ngIf="treeNoRecord" class="devui-no-data-tip">{{ i18nCommonText?.noRecordsFound }}</div>
  <div *ngIf="tagOption.multiple" class="devui-dropdown-operation-area">
    <d-button [disabled]="!tagOption.value.value?.length" (btnClick)="getTreeValue(tagOption); closeMenu(dropdown)">{{
      i18nCategorySearchText?.confirm
    }}</d-button>
    <d-button bsStyle="common" (btnClick)="closeMenu(dropdown)">{{ i18nCategorySearchText?.cancel }}</d-button>
  </div>
</ng-template>
